<template>
  <!-- 权限管理-用户管理 -->
  <div class="user-management">
    <div class="row-two">
      <a-card class="row-two-left">
        <div class="input-box">
          <a-input class="input" placeholder="请输入部门名称"></a-input>
          <a-button class="button"><SearchOutlined /></a-button>
        </div>

        <a-directory-tree
          v-model:expandedKeys="expandedKeys"
          v-model:selectedKeys="selectedKeys"
          multiple
          :tree-data="treeData"
          @select="clickTreeNode"
        ></a-directory-tree>
      </a-card>
      <div class="row-two-right">
        <a-card class="query" title="查询">
          <div class="input-box">
            <div class="item">
              <div class="text">用户名称</div>
              <a-input class="input" placeholder="请输入"> </a-input>
            </div>
            <div class="item">
              <div class="text">手机号码</div>
              <a-input class="input" placeholder="请输入"> </a-input>
            </div>
            <div class="item">
              <div class="text">状态</div>
              <a-select class="input" placeholder="请选择">
                <a-select-option value="1">测试1</a-select-option>
                <a-select-option value="2">测试2</a-select-option>
              </a-select>
            </div>
            <div class="item item-time">
              <div class="text">创建时间</div>
              <a-range-picker class="input picker" show-time />
            </div>
            <div class="item">
              <a-button class="button">重置</a-button>
              <a-button type="primary">查询</a-button>
            </div>
          </div>
        </a-card>
        <a-card class="list" :title="listTitle">
          <template #extra>
            <div class="button-box">
              <a-button class="button" type="primary" @click="clickAddUser"
                >新增</a-button
              >
              <a-button class="button">修改</a-button>
              <a-button class="button">删除</a-button>
              <a-button class="button">导入</a-button>
              <a-button class="button">导出</a-button>
            </div>
          </template>
          <a-table class="table" :columns="columns" :data-source="tableData">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'id6'">
                <a-switch :checked="record.id6"></a-switch>
              </template>
              <template v-if="column.dataIndex === 'operation'">
                <div class="operation">
                  <span>修改</span>
                  <span>删除</span>
                  <span>重置密码</span>
                  <span>分配角色</span>
                </div>
              </template>
            </template>
          </a-table>
        </a-card>
      </div>
    </div>
    <AddUserModal
      :open="openAddUserModal"
      @cancel="cancelAddUserModal"
    ></AddUserModal>
  </div>
</template>
<script setup lang="ts">
// 引入组件
import AddUserModal from './modal/AddUserModal.vue'
// 引入方法
import { defineProps, defineEmits, watch, onMounted, ref } from 'vue'
import { FolderOutlined, SearchOutlined } from '@ant-design/icons-vue'
const props = defineProps({})
const emits = defineEmits([])
// 自定义状态
const expandedKeys = ref(['0-0', '0-1'])
const selectedKeys = ref([])
const treeData = [
  {
    title: '总公司',
    key: '0-0',
    children: [
      {
        title: '研发部门',
        key: '0-0-0',
        isLeaf: true,
      },
      {
        title: '市场部门',
        key: '0-0-1',
        isLeaf: true,
      },
      {
        title: '测试部门',
        key: '0-0-2',
        isLeaf: true,
      },
      {
        title: '财务部门',
        key: '0-0-3',
        isLeaf: true,
      },
      {
        title: '运维部门',
        key: '0-0-4',
        isLeaf: true,
      },
    ],
  },
  {
    title: '分公司',
    key: '0-1',
    children: [
      {
        title: '研发部门',
        key: '0-1-0',
        isLeaf: true,
      },
      {
        title: '市场部门',
        key: '0-1-1',
        isLeaf: true,
      },
      {
        title: '测试部门',
        key: '0-1-2',
        isLeaf: true,
      },
      {
        title: '财务部门',
        key: '0-1-3',
        isLeaf: true,
      },
      {
        title: '运维部门',
        key: '0-1-4',
        isLeaf: true,
      },
    ],
  },
]
const listTitle = ref('列表')
const columns = [
  { title: '用户编号', dataIndex: 'id1' },
  { title: '用户名称', dataIndex: 'id2' },
  { title: '用户昵称', dataIndex: 'id3' },
  { title: '部门', dataIndex: 'id4' },
  { title: '手机号码', dataIndex: 'id5' },
  { title: '状态', dataIndex: 'id6' },
  { title: '创建时间', dataIndex: 'id7' },
  { title: '操作', dataIndex: 'operation' },
] //列表配置
const tableData = [
  {
    id1: '1',
    id2: 'admin',
    id3: '小明',
    id4: '研发部门',
    id5: '17633456678',
    id6: true,
    id7: '2025-03-28 12:12:30',
  },
  {
    id1: '1',
    id2: 'admin',
    id3: '小明',
    id4: '研发部门',
    id5: '17633456678',
    id6: false,
    id7: '2025-03-28 12:12:30',
  },
  {
    id1: '1',
    id2: 'admin',
    id3: '小明',
    id4: '研发部门',
    id5: '17633456678',
    id6: true,
    id7: '2025-03-28 12:12:30',
  },
  {
    id1: '1',
    id2: 'admin',
    id3: '小明',
    id4: '研发部门',
    id5: '17633456678',
    id6: true,
    id7: '2025-03-28 12:12:30',
  },
  {
    id1: '1',
    id2: 'admin',
    id3: '小明',
    id4: '研发部门',
    id5: '17633456678',
    id6: true,
    id7: '2025-03-28 12:12:30',
  },
  {
    id1: '1',
    id2: 'admin',
    id3: '小明',
    id4: '研发部门',
    id5: '17633456678',
    id6: true,
    id7: '2025-03-28 12:12:30',
  },
] //列表数据
const openAddUserModal = ref(false) //新增用户对话框状态
onMounted(() => {})
// 自定义方法
//点击树节点
const clickTreeNode = (
  selectedKeys,
  { selected: bool, selectedNodes, node, event }
) => {
  listTitle.value = node.title
}
//点击新增用户
const clickAddUser = () => {
  openAddUserModal.value = true
}
//关闭新增用户对话框
const cancelAddUserModal = () => {
  openAddUserModal.value = false
}
</script>
<style lang="less" scoped>
.user-management {
  .row-one {
    margin-bottom: (20 / @vh);
    .row-one-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        display: flex;
        align-items: center;
        padding: (24 / @vh) (24 / @vw);
        width: 18%;
        color: #3d3d3d;
        font-size: (16 / @vw);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: (8 / @vw);
        cursor: pointer;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);
        &:first-child {
          margin-bottom: (20 / @vh);
        }
        &:hover {
          color: @tc;
          border-color: @tc;
        }
        .icon {
          margin-right: (10 / @vw);
          font-size: (20 / @vw);
        }
      }
    }
  }
  .row-two {
    display: flex;
    .row-two-left {
      margin-right: (20 / @vw);
      .input-box {
        display: flex;
        margin-bottom: (10 / @vh);
        .input {
          margin-right: (10 / @vw);
        }
        .button {
        }
      }
    }
    .row-two-right {
      flex: 1;
      .query {
        margin-bottom: (20 / @vh);
        .input-box {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .item {
            display: flex;
            align-items: center;
            width: 20%;
            &:first-child {
              margin-bottom: (20 / @vh);
            }
            .text {
              margin-right: (10 / @vw);
              text-align: right;
            }
            .input {
              flex: 1;
            }
            .picker {
              width: (300 / @vw);
            }
            .button {
              margin-right: (10 / @vw);
            }
          }
          .item-time {
            width: 30%;
          }
        }
      }
      .list {
        .button-box {
          .button {
            margin-right: (10 / @vw);
            &:last-child {
              margin-right: 0;
            }
          }
        }
        .table {
          .operation {
            span {
              margin-right: (10 / @vw);
              color: @tc;
              cursor: pointer;
              &:last-child {
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
